<template>
  <div class="article-page">
    <!-- 首页 -->
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#999" loop>
      <van-swipe-item
        ><img src="http://liufusong.top:8080/img/swiper/1.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://liufusong.top:8080/img/swiper/2.png" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="http://liufusong.top:8080/img/swiper/3.png" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <div class="sesrch">
      <span @click="$router.push('cityList')">{{city}}<van-icon name="arrow-down" /></span>
      <input type="text" placeholder="请输入小区或地址" />
      <van-icon name="guide-o" @click="$router.push('/mapHouse')"/>
    </div>
    <!-- 分区 -->
    <van-grid :icon-size="40">
      <van-grid-item icon="wap-home-o" text="整租" to="/find"  />
      <van-grid-item icon="friends-o" text="合租" to="/find"  />
      <van-grid-item icon="guide-o" text="地图找房" to="/mapHouse" />
      <van-grid-item icon="home-o" text="去出租" to="/addHouse" />
    </van-grid>
    <!-- 租房小组 -->
    <div class="rentTeam">
      <div class="header">
        <h3>
          租房小组
          <span class="more">更多</span>
        </h3>
      </div>
      <div class="body">
        <van-grid direction="horizontal" :column-num="2">
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getCityInfoByName } from '@/api/house'
import { getCityToken, setCityValueToken, setCityToken } from '@/utils/storage'

export default {
  name: 'article-page',
  computed: {
    city () {
      return getCityToken() || '上海'
    }
  },
  data () {
    return {}
  },
  async created () {
    // 根据城市名称获取该城市信息
    const res = await getCityInfoByName(getCityToken())
    // console.log(res)
    if (!getCityToken()) {
      setCityValueToken(res.body.value)
      setCityToken(res.body.label)
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  overflow: hidden;
  position: relative;
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  img {
    width: 100%;
    height: auto;
  }
}
.sesrch {
  z-index: 999;
  position: fixed;
  top: 20px;
  left: 50px;
  background-color: #fff;
  .van-icon-guide-o {
    margin: 0 10px;
  }
}
::v-deep .van-grid-item__icon {
  padding: 10px;
  background-color: #f2fbf7;
  border-radius: 50%;
  color: #00ae66;
}
.rentTeam {
  overflow: hidden;
  padding: 0 0px;
  background-color: #f6f5f6;
  min-height: 200px;
  .header {
    position: relative;
    margin: 15px 10px 15px 20px;
    text-align: left;
    font-size: 15px;
    .more {
      color: #787d82;
      position: absolute;
      right: 0;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .body {
    .van-grid-item__icon {
      background-color: #fff;
    }
  }
}
</style>
